<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>好友留言板</title>
  <style>
    body { font-family: Arial; background: #f0f8ff; margin: 0; padding: 20px; }
    .container { max-width: 1000px; margin: auto; }
    h1 { text-align: center; color: #007bff; }
    .input-box { margin-bottom: 20px; }
    textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ccc; }
    button { margin-top: 10px; background: #007bff; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; }
    .board { background: #fff; border: 1px solid #ccc; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
    .message { padding: 8px; margin: 5px 0; background: #e6f0ff; border-radius: 5px; display: flex; justify-content: space-between; }
    .message button { background: red; padding: 2px 8px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>好友留言板</h1>
    <div class="input-box">
      <textarea id="messageInput" rows="3" placeholder="写下你的留言..."></textarea>
      <button onclick="addMessage()">提交留言</button>
    </div>
    <div id="board" class="board">
      <h2>留言列表</h2>
      <div id="messages"></div>
    </div>
  </div>
<script>
  const boardKey = "blueBoard";
  let messages = JSON.parse(localStorage.getItem(boardKey)) || [];
  function display() {
    const container = document.getElementById("messages");
    container.innerHTML = "";
    messages.forEach((msg, idx) => {
      const div = document.createElement("div");
      div.className = "message";
      div.innerHTML = `${msg} <button onclick="del(${idx})">删除</button>`;
      container.appendChild(div);
    });
  }
  function addMessage() {
    const input = document.getElementById("messageInput");
    if (input.value.trim()) {
      messages.push(input.value.trim());
      localStorage.setItem(boardKey, JSON.stringify(messages));
      input.value = "";
      display();
    }
  }
  function del(i) {
    messages.splice(i,1);
    localStorage.setItem(boardKey, JSON.stringify(messages));
    display();
  }
  display();
</script>
</body>
</html>
